<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios拦截器</title>
    <script crossorigin="anonymous" src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
</head>
<body>
    <script>
        /**
         *  拦截器是一些函数
         *  1. 请求拦截器
         *      对请求的内容以及参数做处理与检查
         *  2. 响应拦截器
         *      对响应的结果进行预处理
         * 
         */ 
        // 添加请求拦截器
        // axios.interceptors.request.use(成功回调,失败的回调)     onResolve: function(config){ return config}
        //                             config 就是配置对象
        axios.interceptors.request.use(config => {
            console.log('请求拦截器  成功  1 ');
            // 设置参数
            config.params = {x:1,y:2}
            return config;
        },error => {
            console.log('请求拦截器  失败  1 ');
            return Promise.reject(error);
        });
        // 拦截器可以定义多个
        axios.interceptors.request.use(config => {
            console.log('请求拦截器  成功  2');
            // 设置请求头
            config.headers = {
                a:100,b:200
            }
            return config;
            // return Promise.reject('我不同意');
        },error => {
            console.log('请求拦截器  失败  2 ');
            return Promise.reject(error);
        });
        // 定义响应拦截器
        axios.interceptors.response.use(response=>{
            console.log('响应拦截器  成功  1');
            return response.data;
        },error=>{
            console.log('响应拦截器  失败  1');
            return Promise.reject(error);
        })
        // 响应拦截器也可以定义多个
        axios.interceptors.response.use(response=>{
            console.log('响应拦截器  成功  2');
            return response;
        },error=>{
            console.log('响应拦截器  失败  2');
            return Promise.reject(error);
        })

        // 发送请求
        axios({
            method:'get',
            url:'http://127.0.0.1:8080/server'
        })
        
        
        
        .then(response=>{
            console.log('成功', response);
        },error=>{
            console.log('失败',error);
        })

        // 请求拦截器：后添加的先执行 
                    //   可以添加一些请求需要携带的公共信息，不如token header 参数，开启loading 等等
        // 响应拦截器：按添加先后顺序执行
                    //   可以处理响应回来的结果。关闭loading
        


    </script>
</body>
</html>